<template>
  <div class="credits app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane label="待放款" name="1"></el-tab-pane>
      <el-tab-pane label="已放款" name="2"></el-tab-pane>
    </el-tabs>

    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="">
        <el-input v-model="queryParams.id" placeholder="担保编号" clearable style="width: 200px" @input="(v) => (aaa = v.replace(/[^\d]/g, ''))" />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="queryParams.phone" placeholder="姓名/手机号" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item label="" prop="jobGroup"> <el-input v-model="queryParams.code" placeholder="合同号" clearable style="width: 260px" /> </el-form-item>
      <el-form-item label="" prop="jobGroup">
        <el-select v-model="queryParams.type" placeholder="担保类型" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="status">
        <el-date-picker v-model="queryParams.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 260px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="onSearch"> 搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="state.jobList">
      <el-table-column type="selection" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="user_name" :show-overflow-tooltip="true" />
      <el-table-column label="合同号" align="center" prop="contract_code"> </el-table-column>
      <el-table-column label="申请日期" align="center" prop="create_time" :show-overflow-tooltip="true" />
      <el-table-column label="申请额度" align="center" prop="apply_quota" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.apply_quota }}元</div>
        </template></el-table-column
      >
      <el-table-column label="审批金额" align="center" prop="approval_amount" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.approval_amount == "" ? scope.row.apply_quota : scope.row.approval_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="合同金额" align="center" prop="contract_amount" :show-overflow-tooltip="true" />
      <el-table-column label="担保期限" align="center" prop="loan_stages" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.loan_stages }}个月</div>
        </template></el-table-column
      >
      <el-table-column label="担保类型" align="center" prop="loan_type" :show-overflow-tooltip="true">
        <template #default="scope" v-if="active != 3">
          <div>{{ loanTypes(scope.row.loan_type) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="method" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ methodType(scope.row.method) }}</div>
        </template></el-table-column
      >
      <el-table-column label="放款时间" align="center" prop="loan_time" :show-overflow-tooltip="true" />
      <el-table-column label="放款渠道" align="center" prop="channel" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.channel == 1 ? "委托银行放款" : "金融机构放款" }}</div>
        </template></el-table-column
      >
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <div>{{ statusType(scope.row.status) }}</div>
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)" v-if="scope.row.status == '9'">{{ scope.row.channel == 1 ? "委托银行放款" : "金融机构放款" }}</el-button>
          <el-tooltip content="查看" placement="top" v-else>
            <el-button link type="primary" icon="View" size="small" @click="handleClick(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="onClick" />
  </div>
</template>

<script setup name="Job">
import { loanDisbursementList } from "@/api/loanBefore";
import { statusType, loanTypes, methodType } from "@/utils/dict";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { reactive } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
import { formatDate } from "@/utils/index.js";
const jobList = reactive([]);
const activeName = ref("1");
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(1);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const value2 = ref("");
const props = defineProps({
  active: {
    type: String,
  },
});

const state = reactive({
  jobList: [],
});

const data = reactive({
  form: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    name: "", //姓名
    phone: "", //电话
    status: activeName.value, //状态
    type: "", //类型
    time: "", //时间
    startTime: "", //开始时间
    endTime: "", //结束时间
    code: "", //合同号
  },
});

const { queryParams, form } = toRefs(data);

const options = [
  {
    value: "1",
    label: "个人信用",
  },
  {
    value: "2",
    label: "个人分期",
  },
  {
    value: "3",
    label: "个人抵押",
  },
  {
    value: "4",
    label: "企业信用",
  },
  {
    value: "5",
    label: "企业分期",
  },
  {
    value: "6",
    label: "企业租赁",
  },
];

function auditStatus(status) {
  switch (status) {
    case 1:
      return "初审通过";
    case 2:
      return "复审通过";
    case 3:
      return "复审驳回";
    case 4:
      return "复审终止";
    case 5:
      return "终审通过";
    case 6:
      return "终审驳回";
    case 7:
      return "终审终止";
    case 8:
      return "放款审批";
    case 9:
      return "放款处理";
    case 10:
      return "已放款";
  }
}

function handleClick(row) {
  console.log(row, "放款登记详情");
  router.push({
    path: "process-contents",
    query: {
      appplyId: row.id,
      name: row.user_name,
      status: row.status,
    },
  });
}

/** 查询任务列表 */
function getList() {
  loading.value = true;
  loanDisbursementList(queryParams.value).then((res) => {
    console.log(res, "rees");
    state.jobList = res.data.list;
    total.value = res.data.total_page;
    loading.value = false;
  });
}

const handleChange = (tab, event) => {
  queryParams.value.name = "";
  queryParams.value.phone = "";
  queryParams.value.type = "";
  queryParams.value.time = "";
  queryParams.value.id = "";
  queryParams.value.startTime = "";
  queryParams.value.endTime = "";
  queryParams.value.status = activeName.value;
  getList();
};

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    jobId: undefined,
    jobName: undefined,
    jobGroup: undefined,
    invokeTarget: undefined,
    cronExpression: undefined,
    misfirePolicy: 1,
    concurrent: 1,
    status: "0",
  };
  proxy.resetForm("jobRef");
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "monitor/job/export",
    {
      ...queryParams.value,
    },
    `job_${new Date().getTime()}.xlsx`
  );
}

//搜索
function onSearch() {
  // const reg = new RegExp("^1[3456789]\\d{9}$");
  // if (!reg.test(queryParams.value.phone) && queryParams.value.phone != "") {
  //   return ElMessage({
  //     message: "请输入正确手机号码",
  //     type: "warning",
  //   });
  // }
  if (queryParams.value.time && queryParams.value.time.length > 0) {
    queryParams.value.startTime = formatDate(queryParams.value.time[0]);
    queryParams.value.endTime = formatDate(queryParams.value.time[1]);
  }
  getList();
}

//分页
function onClick() {
  getList();
}

getList();
</script>
<style lang="scss" scoped>
.statusStyle {
  color: #ff0000;
}
:deep(.el-dialog) {
  height: 100px;
}
.pagination-container {
  height: 56px;
  margin-top: 15px;
}
</style>
